<template>
  <div>
    <div class="qqSearch">
      <div class="left">音乐馆</div>
      <router-link :to="{name:'inputSearch'}" class="center"><span class="iconfont icon-search"></span> 搜索</router-link>
      <div class="iconfont icon-music"></div>
    </div>
  </div>
</template>

<script>
  export default {}
</script>

<style lang="less">
  .qqSearch{
    width: 100%;
    position: relative;
    padding-bottom: 2rem;
    .left{
      width: 22%;
      font-size: 2rem;
    }
    .center{
      position: absolute;
      left: 8rem;
      top: 0;
      width: 65%;
      border-radius: 1.2rem;
      color: #000;
      height: 3rem;
      line-height: 3rem;
      background-color: #fff;
      text-align: center;
    }
    .icon-music{
      position: absolute;
      right: 1rem;
      top: 0.1rem;
      font-size: 2rem;
    }
  }
</style>
